<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆快照查找分离dom</title>
</head>

<body>

    <!--    什么是分离DOM？
                1.界面元素存活在DOM树上
                2.垃圾对象时的DOM节点：dom节点在dom树上进行了脱离，并且在js代码中没有引用，称为：dom垃圾
                3.分离状态的DOM节点：dom节点在dom树上进行了脱离，但是在js代码上有引用，称分离dom（页面看不见但是在js中占据内存）
     -->
    <!-- 
         f12打开浏览器管理，=》Memory=>Profiles(堆快照)=》Take snapshot(拍照)
         =》生成Snapshot1信息=》Summary：deta=>搜索为空，不存在分离dom
      -->
    <button id="btn">Add</button>
    <script>
        var tempEle

        function test() {
            var ul = document.createElement('ul')
            for (let i = 0; i < 10; i++) {
                var li = document.createElement('li')
                ul.appendChild(li)
            }

            //刷新=》 点击Take snapshot=>点解页面Add=》生成页面快照snapshot2=》
            // =》Summary:deta生成了10个分离dom，无用dom，单占据js内存
            tempEle = ul
                //刷新=》 查询js存在分离dom，代码修改，清除dom节点=》重新拍摄快照=》
                // 生成snapshot3,查询deta，搜索为空
                // 说明页面已清除分离dom，无用空间得以释放
            tempEle = null
        }

        document.getElementById('btn').addEventListener('click', test)
            /*
            小结：
            通过浏览器的堆快照功能，可以监听页面的dom节点生成，是否存在分离dom，无效占用js内存，
            通过来回切换堆快照，可以定位某一节点的操作是否是无效代码或者占用js内存，
            从而定位代码冗余，进行逻辑优化，提高js执行效率
        
            */
    </script>
</body>

</html>